<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    1.引入-->
    <script src="../../lib/echarts.min.js"></script>
    <script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <style>
        .dvecharts {
            width: 80%;
            margin-left: 10%;
            height: 400px;
        }
    </style>
</head>
<body>
    <div>
        <!--    2.标签 显示图表-->
        <div class="dvecharts" id="dv1"></div>
    </div>
    <script>
        load1();
        function load1(){
            var dv1=echarts.init(document.getElementById("dv1"));
            var option = {
                title: {
                    text: '单位统计',
                    left: 'center',
                    textStyle: {
                        color: 'red'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['年', '月', '日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
        dv1.setOption(option)
        //请求接口 获取真实数据 Ajax
        $.get("/api/ApartmentChaNorm/roletj.do",function (res){
            if(res.code==0){
                //赋值
                option.xAxis.data=res.data.unit;
                option.series[0].data=res.data.num;
                dv1.setOption(option)
            }
        })
    }
</script>
</body>
</html>